<template>
    <div class="shareLogin">
        <two-ceil></two-ceil>
        <div class="shareLoginBox wrap">
            <div class="shareLoginBanner clearfix">
                <div class="bannerLeft" v-if="userInfo">
                    <p class="shareTitle">
                        <img :src="userInfo.avatar" alt="">
                    </p>
                    <div class="shareInfo">
                        <p v-text="userInfo.name"></p>
                        <p>给你赠送7天VIP</p>
                    </div>
                </div>
                <div class="bannerRight">
                    <register></register>
                </div>
            </div>
            <div class="vipMsg">
                <h3>VIP特权</h3>
                <div class="tablesBox">
                    <vip-table></vip-table>
                </div> 
            </div>
        </div>
    </div>
</template>
<script>
import twoCeil from '../twoCeil';
import register from './register';
import vipTable from '../rechargeNew/tables';
export default {
    data(){
        return{
            userInfo:null,//用户信息
        }
    },
    components:{
        twoCeil,
        register,
        vipTable
    },
    created(){
        if(this.$route.query.onlycode){
            axios.get('/shareUser/'+this.$route.query.onlycode).then(response=>{
                this.userInfo = response.data;
            })
        }
        
    },
    beforeCreate () {
        $('#app').removeAttr('style');
        if(!this.$route.query.onlycode){
            this.$router.push('/')
        }else if(window.localStorage.getItem('jwt_token')){
            this.$router.push('/share')
        }
    }
}
</script>
<style>
    .shareLoginBox{
        min-height: 1050px;
        background: #fff;
        margin-top: 11px;
        margin-bottom: 29px;
        border-radius: 5px;
        padding-top: 10px;
        padding-left: 10px;
    }
    .shareLoginBanner{
        position:relative;
        width: 1242px;
        height: 492px;
        background: url(http://www.jishe.com/imagecache/original/image/20190116/651bcb55f1d9b70f5b5185a1e5f2b316.png) no-repeat center;
    }
    .bannerLeft{
        float: left;
        width: 314px;
        height: 93px;
        position:absolute;
        top: 163px;
        left: 165px;
    }
    .shareTitle{
        float: left;
        margin-right: 15px;
    }
    .shareTitle img{
        display:block;
        width: 93px;
        height: 93px;
        border-radius:50%;
    }
    .shareLoginBox .shareInfo{
        float: left;
        width: 190px;
        height: 70px;
        font-size: 24px;
        line-height:34px;
        color: #333333; 
        padding-top: 18px;
    }
    .shareInfo p{
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .bannerRight{
        float: right;
        border-radius: 4px;
        background: #fff;
        width: 343px;
        margin-top: 26px;
        margin-right: 108px;
    }
    .vipMsg{
        margin-top: 15px;
        text-align: center;
    }
    .vipMsg h3{
        font-size: 24px;
        line-height: 74px;
        color: #333;
        font-weight: bold;
    }
    .tablesBox{
        display:inline-block;
        margin: 0 auto;
    }
</style>
